<template>
  <div id="ChooseBat">
    <el-dialog
      title="提示"
      :visible.sync="show"
      width="40%"
      :before-close="handleClose"
    >
      <div class="search">
        <el-input size="mini" />
        <el-input size="mini" />
        <el-button type="primary">搜索</el-button>
      </div>
      <el-table
        :data="list"
        border
        style="width: 100%"
      >
        <el-table-column
          prop="batid"
          label="编号"
          width="180"
        />
        <el-table-column
          prop="battype"
          label="类型"
          width="180"
        />
        <el-table-column
          prop="batnum"
          label="接口"
        />
        <el-table-column
          label="选择"
        >
          <template slot-scope="scope">
            <el-button type="primary" @click="choose(scope.row)">选择</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: 'ChooseBat',
  props: {
    show: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      list: [
        { batid: '1011011', battype: '60v', batnum: '3*3' },
        { batid: '1011012', battype: '60c', batnum: '4*4' },
        { batid: '1011013', battype: '60max', batnum: '5*5' }
      ]
    }
  },
  created() {
    console.log(this.show, '123')
  },
  methods: {
    handleClose() {
      this.$emit('close')
    },
    choose(row) {
      this.$emit('choose', row)
    }
  }
}
</script>
  <style lang='scss' scoped>
  .search {
    display: flex;
    flex-direction: row;
    margin-bottom: 20px;
    .el-input {
      width: 200px;
      margin-right: 10px;
    }
  }
  </style>
